﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Charts.aspx.cs" Inherits="Charts" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>网络流量包分析</title>
    <!-- Le styles -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <style>
	h1, h2, h3, .masthead p, .subhead p, .marketing h2, .lead
	{
	  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
	  font-weight: normal;
	}
	section {
    margin-top: 20px;
    padding-top: 30px;
    }
    h1
    {
    margin: 30px auto 0px;
    }
    </style>
</head>

<body data-spy="scroll" data-target=".bs-docs-sidebar" style="position: static;">
 
	<!-- header -->
	 <header  style="background:url(img/sanyecao.jpg)" >
       <div class="container">
        <h1 class="muted offset3">网络流量包分析</h2>
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="Default.aspx">首页</a></li>
          <li><a href="About.aspx">关于</a></li>
        </ul>
      </div>
    </header>
      <hr class="soften" style="margin-top:0px"/> 
    <!-- nav
    ================================================== -->
<div class="container">
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix">
		  <li class="active"><a href="#totalflow"><i class="icon-chevron-right"></i>总流量曲线图</a></li>
          <li><a href="#ipflow"><i class="icon-chevron-right"></i> IP到IP流量数据统计</a></li>
		  <li><a href="#delay"><i class="icon-chevron-right"></i> IP到IP网络延时统计</a></li>
		  <li><a href="#apps"><i class="icon-chevron-right"></i> 网络服务应用列表</a></li>
		  <li><a href="#clients"><i class="icon-chevron-right"></i> 网络服务client节点数统计</a></li>
		  
        </ul>
      </div>
      <form id="form1" runat="server">
      <div class="span9">
       <asp:SqlDataSource ID="totalFlowDataSource" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
                    
            SelectCommand="SELECT [timestamp], [flowrate] FROM [flowinfo] WHERE ([fileid] = @fileid)">
                    <SelectParameters>
                        <asp:QueryStringParameter Name="fileid" QueryStringField="fileid" 
                            Type="Int32" />
                    </SelectParameters>
         </asp:SqlDataSource>              
           <asp:SqlDataSource ID="rttDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
              
              SelectCommand="SELECT ip1, ip2, COUNT(*) AS count, MAX(RTT) * 1000 AS maxRTT, MIN(RTT) * 1000 AS minRTT, AVG(RTT) * 1000 AS avgRTT FROM (SELECT p1.srcip AS ip1, p1.srcport AS port1, p2.srcip AS ip2, p2.srcport AS port2, p2.capturetime - p1.capturetime AS RTT FROM (SELECT packetid, length, ipversion, srcip, dstip, srcmac, dstmac, srcport, dstport, capturetime, seqnum, acknum, urg, ack, psh, rst, syn, fin, fileid FROM packetinfo WHERE (fileid = @fileid)) AS p1 INNER JOIN packetinfo AS p2 ON p2.fileid = p1.fileid AND p1.packetid &lt; p2.packetid AND p1.seqnum = p2.acknum - 1 AND p1.srcip = p2.dstip AND p1.dstip = p2.srcip WHERE (p1.syn = 1) AND (p1.ack = 0) AND (p2.syn = 1)) AS derivedtbl_1 GROUP BY ip1, ip2 ORDER BY avgRTT DESC">
               <SelectParameters>
                   <asp:QueryStringParameter Name="fileid" QueryStringField="fileid" />
               </SelectParameters>
            </asp:SqlDataSource>
            <asp:SqlDataSource ID="topRTTDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
              
              
              SelectCommand="SELECT TOP (50) RTRIM(ip1) + ' ' + '-' + ' ' + RTRIM(ip2) AS pair, avgRTT * 1000 AS AverageRTT FROM (SELECT ip1, ip2, COUNT(*) AS count, AVG(RTT) AS avgRTT FROM (SELECT p1.srcip AS ip1, p1.srcport AS port1, p2.srcip AS ip2, p2.srcport AS port2, p2.capturetime - p1.capturetime AS RTT FROM (SELECT packetid, length, ipversion, srcip, dstip, srcmac, dstmac, srcport, dstport, capturetime, seqnum, acknum, urg, ack, psh, rst, syn, fin, fileid FROM packetinfo WHERE (fileid = @fileid)) AS p1 INNER JOIN packetinfo AS p2 ON p2.fileid = p1.fileid AND p1.packetid &lt; p2.packetid AND p1.seqnum = p2.acknum - 1 AND p1.srcip = p2.dstip AND p1.dstip = p2.srcip WHERE (p1.syn = 1) AND (p1.ack = 0) AND (p2.syn = 1)) AS derivedtbl_1 GROUP BY ip1, ip2) AS derivedtbl_2 ORDER BY avgRTT DESC">
                <SelectParameters>
                    <asp:QueryStringParameter Name="fileid" QueryStringField="fileid" />
                </SelectParameters>
            </asp:SqlDataSource>
	<!-- 总流量统计
        ================================================== -->
	<section id="totalflow" class="thumbnail featuredbox">
          <div class="page-header">
            <h3>总流量曲线图</h3>
          </div>
         <asp:Chart ID="Chart1" SkinID="LineChartSkin" runat="server"
            DataSourceID="totalFlowDataSource" >
                        <Series>
                            <asp:Series MarkerSize="8" BorderWidth="1" XValueType="Int32" Name="Series1" ChartType="Line"
                                MarkerStyle="None" ShadowColor="Black" BorderColor="180, 26, 59, 105" Color="Green"
                                ShadowOffset="2" YValueType="Int32" XValueMember="timestamp" 
                                YValueMembers="flowrate">
                            </asp:Series>
                        </Series>
                        <ChartAreas>
                            <asp:ChartArea Name="ChartArea1">
                            </asp:ChartArea>
                        </ChartAreas>
                    </asp:Chart>

        </section>
		
	<!-- IP到IP流量数据统计
        ================================================== -->
	<section id="ipflow" class="thumbnail featuredbox">
          <div class="page-header">
            <h3>IP到IP流量数据统计（点击表头字段升序降序排列）</h3>
          </div>
         <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
         <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
         <ContentTemplate>
         <asp:GridView ID="gvIpPairFlow" runat="server" AllowPaging="True" AllowSorting="true"
            AutoGenerateColumns="False" 
                 onpageindexchanging="gvIpPairFlow_PageIndexChanging" 
                 onsorting="gvIpPairFlow_Sorting">
                        <Columns>
                            <asp:BoundField DataField="srcip" HeaderText="源IP" SortExpression="srcip"/>
                            <asp:BoundField DataField="dstip" HeaderText="目的IP" SortExpression="dstip" />
                            <asp:BoundField DataField="outbytes" HeaderText="发送包" SortExpression="outbytes" />
                            <asp:BoundField DataField="inbytes" HeaderText="接收包" SortExpression="inbytes" />
                             <asp:BoundField DataField="outbytes" DataFormatString="{0:N0}" HeaderText="发送字节" SortExpression="outbytes" />
                            <asp:BoundField DataField="inbytes" DataFormatString="{0:N0}" HeaderText="接收字节" SortExpression="inbytes" />
                            <asp:BoundField DataField="totalbytes" DataFormatString="{0:N0}" HeaderText="总流量(B)" SortExpression="totalbytes" />
                        </Columns>
              </asp:GridView>
                        </ContentTemplate>
                       </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel5" UpdateMode="Conditional" runat="server">
         <ContentTemplate>
                    <hr />
                     <p class="lead">IP到IP流量排行  TopN:
                    <asp:dropdownlist id="DropDownList1" runat="server" AutoPostBack="True" Width="60px" 
                             Height="30px" onselectedindexchanged="DropDownList1_SelectedIndexChanged">
					    <asp:listitem Value="v1" Selected ="True">10</asp:listitem>
                        <asp:listitem Value="v2">15</asp:listitem>
                        <asp:listitem Value="v3">20</asp:listitem>
                    </asp:dropdownlist></p>                
                    <center>
                      <asp:Chart ID="TopFlowPieChart" SkinID="PieChartSkin" runat="server">
                        <Titles>
                            <asp:Title Text="Top 10 Flows">
                            </asp:Title>
                        </Titles>
                        <Series>
                            <asp:Series ChartType="Pie" Name="Series1" Legend="Legend1"  Label="#PERCENT{P1}" ToolTip="#VALX\n#VALY{N0} KB" LegendToolTip="#VALX\n#VALY{N0} KB" >
                            </asp:Series>
                        </Series>
                        <ChartAreas>
                            <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BackSecondaryColor="Transparent"
                                BackColor="Transparent" ShadowColor="Transparent" BorderWidth="0">
                            </asp:ChartArea>
                        </ChartAreas>
                        <Legends>
                            <asp:Legend Name="Legend1" BackColor="Transparent" Alignment="Center" Docking="Right"
                                Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="False" LegendStyle="Table">
                            </asp:Legend>
                        </Legends>
                        <BorderSkin SkinStyle="Emboss"></BorderSkin>
                    </asp:Chart>
                    </center>
                     </ContentTemplate>
                       </asp:UpdatePanel>
        </section>	
	<!-- IP到IP网络延时统计
        ================================================== -->
	<section id="delay" class="thumbnail featuredbox">
          <div class="page-header">
            <h3>IP到IP网络延时统计（点击表头字段升序降序排列）</h3>
          </div>
          <div>
         <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
         <ContentTemplate>
        <asp:GridView ID="gvDelay"  runat="server" AutoGenerateColumns="False" 
              DataSourceID="rttDataSource" AllowPaging="True" AllowSorting="True" >
            <Columns>
                <asp:BoundField DataField="ip1" HeaderText="源IP"  ReadOnly="True" SortExpression="ip1" />
                <asp:BoundField DataField="ip2" HeaderText="目的IP" ReadOnly="True" SortExpression="ip2" />
                <asp:BoundField DataField="count" HeaderText="连接数" ReadOnly="True" SortExpression="count" />
                <asp:BoundField DataField="maxRTT" HeaderText="最大RTT" DataFormatString="{0:N3}" ReadOnly="True" 
                    SortExpression="maxRTT" />
                <asp:BoundField DataField="minRTT" HeaderText="最小RTT" DataFormatString="{0:N3}" ReadOnly="True" 
                    SortExpression="minRTT" />
                <asp:BoundField DataField="avgRTT" HeaderText="平均RTT(ms)" DataFormatString="{0:N3}" ReadOnly="True" 
                    SortExpression="avgRTT" />
            </Columns>
          </asp:GridView>
          </ContentTemplate>
          </asp:UpdatePanel>
          </div>
          <hr />
          <p class="lead">平均延时排行</p>
<asp:Chart ID="DelayChart" SkinID="ColumnChartSkin" runat="server" DataSourceID="topRTTDataSource"><Series>
    <asp:Series Name="Series1" XValueMember="pair" YValueMembers="AverageRTT"
        ChartType="Column"></asp:Series></Series>
        <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
        </asp:ChartArea>
        </ChartAreas>
        </asp:Chart>
        </section>	
		
	<!-- 网络服务应用列表
        ================================================== -->		
	<section id="apps" class="thumbnail featuredbox">
          <div class="page-header">
            <h3>网络服务应用列表</h3>
          </div>
          <asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server">
          <ContentTemplate>
          <asp:GridView ID="gvServiceApp" AllowPaging="True" runat="server" 
                  onpageindexchanging="gvServiceApp_PageIndexChanging" AutoGenerateColumns="false">
         <Columns>
                <asp:BoundField DataField="ip" HeaderText="服务IP" ReadOnly="True" />
                <asp:BoundField DataField="clientip" HeaderText="Client IP" ReadOnly="True" />
                <asp:BoundField DataField="port" HeaderText="端口" ReadOnly="True" />
                <asp:BoundField DataField="protocol" HeaderText="协议" ReadOnly="True" />
            </Columns>
          </asp:GridView>
           </ContentTemplate>
          </asp:UpdatePanel>
        </section>		
	<!-- 网络服务client节点数量统计
        ================================================== -->		
	<section id="clients" class="thumbnail featuredbox">
          <div class="page-header">
            <h3>网络服务client节点数列表（点击表头字段升序降序排列）</h3>
          </div>
          <asp:UpdatePanel ID="UpdatePanel4" UpdateMode="Conditional" runat="server">
          <ContentTemplate>
          <asp:GridView ID="gvClientNode" AllowPaging="true" AutoGenerateColumns="false" 
                  runat="server" PageSize="10" AllowSorting="true" 
                  onsorting="gvClientNode_Sorting" 
                  SortedAscendingHeaderStyle-CssClass="sortasc-header" SortedDescendingHeaderStyle-CssClass="sortdesc-header"
                  SortedAscendingCellStyle-CssClass="sortasc-row" 
                  SortedDescendingCellStyle-CssClass="sortdesc-row" 
                  onpageindexchanging="gvClientNode_PageIndexChanging">
             <Columns>
                <asp:BoundField DataField="ip" HeaderText="服务IP" ReadOnly="True" SortExpression="ip" />
                <asp:BoundField DataField="port" HeaderText="端口" ReadOnly="True" SortExpression="port" />
                <asp:BoundField DataField="protocol" HeaderText="协议" ReadOnly="True" SortExpression="protocol"/>
                <asp:BoundField DataField="totalclients" HeaderText="节点数" SortExpression="totalclients"/>
                <asp:BoundField DataField="totalpackets" HeaderText="数据包数" SortExpression="totalpackets" />
                <asp:BoundField DataField="totalbytes" DataFormatString="{0:N0}" HeaderText="字节数" SortExpression="totalbytes" />
            </Columns>
          </asp:GridView>
           </ContentTemplate>
          </asp:UpdatePanel>
            <hr />
          <p class="lead">Client节点柱状图</p>
          <asp:Chart ID="ClientNodeChart" SkinID="ColumnChartSkin" runat=server>
          <Series>
          <asp:Series Name="Series1">
          </asp:Series>
          </Series>
          <ChartAreas>
          <asp:ChartArea Name="ChartArea1">
          </asp:ChartArea>
          </ChartAreas>
          </asp:Chart> 
        </section>		
	</div>
        </form>
  </div>

</div>


    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p>&copy; 2013 by Jimmy</p>
      </div>
    </footer>
	
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="js/jquery.js"></script>
    <script src="js/jquery.unveil.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.scrollUp.min.js"></script>
    <script>
        $(document).ready(function () {
            $("img.lazy").unveil();

            $("#start-intro").click(function () {
                bootstro.start();
            });

            $.scrollUp({
                scrollName: 'scrollUp', // Element ID
                topDistance: '300', // Distance from top before showing element (px)
                topSpeed: 300, // Speed back to top (ms)
                animation: 'fade', // Fade, slide, none
                animationInSpeed: 200, // Animation in speed (ms)
                animationOutSpeed: 200, // Animation out speed (ms)
                scrollText: '', // Text for element
                activeOverlay: false  // Set CSS color to display scrollUp active point, e.g '#00FFFF'
            });
        });
    </script>

    <!-- Analytics
    ================================================== -->
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F3d8e7fc0de8a2a75f2ca3bfe128e6391' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script src="js/holder.js"></script>
    <script src="js/application.js"></script>
</body>
</html>